<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>瀑布流demo</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    /** 瀑布流布局 */
    .masonry {
      display: flex;
      flex-direction: row; /* 父元素水平排列 */
      font-size: 0; 
      /* HACK: 避免图片之间出现1px间隙 */
    }

    /** 行布局 */
    .column {
      display: flex;
      flex-direction: column; /* 子元素垂直排列 */
      width: calc(100%/3); /* ----三列的情况下 */
    }

    img {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div class="masonry">
    <div class="column">
      <div class="item">
        <img src="http://img0.dili360.com/ga/M00/46/FC/wKgBy1iv0WmAaXa1AE7LkZQs2kI077.tub.jpg@!rw9" />
      </div>
      <div class="item">
        <img src="http://img0.dili360.com/ga/M02/46/FD/wKgBy1iv1m6AJjScAERga2XvgKI984.tub.jpg@!rw9" />
      </div>
      <div class="item">
        <img src="http://img0.dili360.com/ga/M01/46/FC/wKgBy1iv1eiAVGZCAAXavDgRVDw422.tub.jpg@!rw9"  />
      </div>
    </div>
    <div class="column">
      <div class="item">
        <img src="http://img0.dili360.com/ga/M00/48/F7/wKgBy1llvmCAAQOVADC36j6n9bw622.tub.jpg@!rw9" />
      </div>
      <div class="item">
        <img src="http://img0.dili360.com/ga/M01/46/FC/wKgBy1iv1eiAVGZCAAXavDgRVDw422.tub.jpg@!rw9" />
      </div>
      <div class="item">
        <img src="http://img0.dili360.com/ga/M02/46/FD/wKgBy1iv1m6AJjScAERga2XvgKI984.tub.jpg@!rw9"  />
      </div>
    </div>
    <div class="column">
      <div class="item">
        <img src="http://img0.dili360.com/ga/M01/46/FC/wKgBy1iv1eiAVGZCAAXavDgRVDw422.tub.jpg@!rw9"  />
      </div>
      <div class="item">
        <img src="http://img0.dili360.com/ga/M02/46/FD/wKgBy1iv1m6AJjScAERga2XvgKI984.tub.jpg@!rw9"  />
      </div>
      <div class="item">
        <img src="http://img0.dili360.com/ga/M00/46/FC/wKgBy1iv0WmAaXa1AE7LkZQs2kI077.tub.jpg@!rw9"  />
      </div>
    </div>
  </div>
</body>

</html>